import React from "react";
export default class Login extends React.Component {
  state = {
    userinfo: {
      uname: "",
      pwd: "",
      type: "sys",
      ismen: true,
    },
  };
  handerChangeUname = (e) => {
    // 获取用户输入的用户名 同时设置给state中的userinfo中的uname
    this.setState({
      userinfo: { ...this.state.userinfo, uname: e.target.value },
    });
  };
  handerChangePwd = (e) => {
    this.setState({
      userinfo: { ...this.state.userinfo, pwd: e.target.value },
    });
  };
  handerChangeType = (e) => {
    this.setState({
      userinfo: { ...this.state.userinfo, type: e.target.value },
    });
  };
  handerChangeMem = (e) => {
    //   注意：复选框的值是checked
    this.setState({
      userinfo: { ...this.state.userinfo, ismen: e.target.checked },
    });
  };

  handerLogin = () => {
    console.log(this.state.userinfo);
  };

  render() {
    return (
      <div style={{ width: "400px", margin: "20px auto" }}>
        <div>
          用户：
          <input
            type="text"
            placeholder="请输入用户名"
            value={this.state.userinfo.uname}
            onChange={this.handerChangeUname}
          />
        </div>
        <div>
          密码：
          <input
            type="text"
            placeholder="请输入用户名"
            value={this.state.userinfo.pwd}
            onChange={this.handerChangePwd}
          />
        </div>
        <div>
          类型
          <select
            value={this.state.userinfo.type}
            onChange={this.handerChangeType}
          >
            <option value="sys">系统管理员</option>
            <option value="other">员工 </option>
          </select>
        </div>
        <div>
          记住：
          <input
            type="checkbox"
            checked={this.state.userinfo.ismen}
            onChange={this.handerChangeMem}
          />
        </div>

        <div>
          <button onClick={this.handerLogin}>登录</button>
        </div>
      </div>
    );
  }
}
